{% extends 'base.html' %}
{% block css%}
<style type="text/css">
</style>
{% endblock %}
{% block body%}
<div class="row">
    <div id="myTabs">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#analog1" aria-controls="analog1" role="tab" data-toggle="tab">Read</a></li>
            <li role="presentation"><a href="#analog2" aria-controls="analog2" role="tab" data-toggle="tab">Write</a></li>
            <li role="presentation"><a href="#analog3" aria-controls="analog3" role="tab" data-toggle="tab">KB Settings</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <br>
            <!-- analog1 begin-->
            <div role="tabpanel" class="tab-pane active" id="analog1">
                <div class="col-md-7">
                    <button id="btn_get_all" class="btn btn-success pull-right" style="margin-bottom:10px">
                        Get all
                    </button>
                    <table id="t_analog" class="table table-hover table-condensed form-inline">
                        <tr>
                            <th width="40%">Name</th>
                            <th>Unit</th>
                            <th>Value</th>
                            <th> <span class="pull-right">Operate</span> </th>
                        </tr>
                        {% for analog1_item in analog1_items %}
                        <tr>
                            <td style="font-size:12px">
                                {{ analog1_item[0] }}
                            </td>
                            <td>
                                {{ analog1_item[1] }}
                            </td>
                            <td id="analog1_val_{{ analog1_item[0] }}">
                            </td>
                            <td>
                                <button class="btn btn-success pull-right" onClick="btn_analog1_evt('{{ analog1_item[0] }}')">
                                    Get
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>

                <div class="col-md-5 {{support}} hide">
                   <h4>Voltage Compensation</h4>
                   <span style="color: #ccc">Set/get module voltage compensation if connector adaptor available.</span>
                      <table class="table table-hover table-condensed form-inline">
                        <tr>
                          <td>Pin ID</td>
                          <td>
                            <select class="form-control"  class="form-control" id="pin_id" style="width:195px; height:35px">
                              <option value=102>102: P3V3_OSFP_CON</option>
                            </select>
                          </td>
                        </tr>
                        <tr>
                          <td>Resister (mohm)</td>
                          <td>
                            <input class="form-control"  class="form-control" id="resistance" type="text" />
                            <i class="fa fa-info-circle" style="color: #ccc" title="resister is less than 100mohm; if zero, no voltage compensation."></i>
                          </td>
                        </tr>
                        <tr>
                          <td>Interval (ms)</td>
                          <td>
                            <input class="form-control"  class="form-control" id="interval" type="text" />
                             <i class="fa fa-info-circle" style="color: #ccc" title="interval is more than 20ms"></i>
                          </td>
                        </tr>

                        <tr>
                          <td>I_Delta (mA)</td>
                          <td>
                            <input class="form-control"  class="form-control" id="delta" type="text" />
                           
                          </td>
                        </tr>
                      <tr>
                          <td>
                            V_Delta (V)
                            &nbsp;
                            <i class="fa fa-info-circle" style="color: #ccc" title="the value of voltage compensation."></i>
                          </td>
                          <td style="background: #FFFFCC">
                            <span id="v_delta" ></span>
                          </td>
                        </tr>

                        <tr>
                          <td colspan="2">
                            <button onclick="btn_analog3_vcp_set()" class="btn btn-primary">Set</button>
                            <button onclick="btn_analog3_vcp_get()" class="btn btn-success">Get</button>
                          </td>
                        </tr>
                      </table>
                </div>

            </div>
            <div role="tabpanel" class="tab-pane" id="analog2">
                <div class="col-md-7">
                    <!-- <button id="btn_get_all" class="btn btn-success pull-right" style="margin-bottom:10px">Get all</button> -->
                    <table id="t_analog2" class="table table-hover table-condensed form-inline">
                        <tr>
                            <th>Name</th>
                            <th>Unit</th>
                            <th>Value</th>
                            <th>Operate</th>
                        </tr>
                        {% for analog2_item in analog2_items %}
                        <tr>
                            <td style="font-size:12px">
                                {{ analog2_item[0] }}
                            </td>
                            <td>
                                {{ analog2_item[1] }}
                            </td>
                            <td>
                                <input class="form-control" style="width:90px" type="text" id="analog2_phy_val_{{ analog2_item[0] }}">
                                <input class="form-control" style="width:90px; background-color:#eee" readonly type="text" id="analog2_hex_val_{{ analog2_item[0] }}">
                            </td>
                            <td>
                                <button class="btn btn-success" onClick="btn_analog2_evt_get('{{ analog2_item[0] }}')">
                                    Get
                                </button>
                                &nbsp;&nbsp;
                                <button class="btn btn-primary" onClick="btn_analog2_evt_set('{{ analog2_item[0] }}')">
                                    Set
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="analog3">
                <div class="col-md-7">
                    <!-- <button id="btn_get_all" class="btn btn-success pull-right" style="margin-bottom:10px">Get all</button> -->
                    <table id="t_analog3" class="table table-hover table-condensed form-inline">
                        <tr>
                            <th>Name</th>
                            <th>Unit</th>
                            <th>Value (K, B)</th>
                            <th>Operate</th>
                        </tr>
                        {% for analog3_item in analog3_items %}
                        <tr>
                            <td style="font-size:12px">
                                {{ analog3_item[0] }}
                            </td>
                            <td>
                                {{ analog3_item[1] }}
                            </td>
                            <td>
                                <input class="form-control" style="width:90px" type="text" id="analog3_k_val_{{ analog3_item[0] }}">
                                <input class="form-control" style="width:90px" type="text" id="analog3_b_val_{{ analog3_item[0] }}">
                            </td>
                            <td>
                                <button class="btn btn-success" onClick="btn_analog3_evt_get('{{ analog3_item[0] }}')">
                                    Get
                                </button>
                                &nbsp;&nbsp;
                                <button class="btn btn-primary" onClick="btn_analog3_evt_set('{{ analog3_item[0] }}')">
                                    Set
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js%}
{{ super() }}
<script type="text/javascript">
function btn_analog1_evt(item) {
    $.post("api/get_analog1", {
            item: item,
        },
        function(data, status) {
            console.log("data: " + data);
            cells = data.split(",");
            $("#analog1_val_" + item).html(cells[1]);
        });
}

function btn_analog2_evt_get(item) {
    $.post("api/get_analog2", {
            item: item,
        },
        function(data, status) {
            console.log("data: " + data);
            cells = data.split(",");

            $("#analog2_phy_val_" + item).val(cells[0]);
            $("#analog2_hex_val_" + item).val(cells[1]);
        });
}

function btn_analog2_evt_set(item) {
    analog2_phy_val = $("#analog2_phy_val_" + item).val();
    if (analog2_phy_val == "") {
        alert("Invalid value.");
        return false;
    }

    $.post("api/set_analog2", {
            item: item,
            analog2_phy_val: analog2_phy_val,
        },
        function(data, status) {
            toastr["success"]("Command successfully issued.");
            console.log("data: " + data);
            btn_analog2_evt_get(item);
        });
}


function btn_analog3_evt_get(item) {
    $.post("api/get_analog3", {
            item: item,
        },
        function(data, status) {
            console.log(data)
            cells = data.split(",");

            $("#analog3_k_val_" + item).val(cells[0]);
            $("#analog3_b_val_" + item).val(cells[1]);
        });
}

function btn_analog3_evt_set(item) {
    analog3_k_val = $("#analog3_k_val_" + item).val();
    analog3_b_val = $("#analog3_b_val_" + item).val();

    if (analog3_k_val == "" || analog3_b_val == "") {
        alert("Invalid value.");
        return false;
    }

    $.post("api/set_analog3", {
            item: item,
            analog3_k_val: analog3_k_val,
            analog3_b_val: analog3_b_val,
        },
        function(data, status) {
            toastr["success"]("Command successfully issued.");
            console.log("data: " + data);
        });
}

function btn_analog1_evt_all() {
    $.post("api/get_analog1_all", {},
        function(data, status) {
            console.log(data);
            d = JSON.parse(data);
            $.each(d, function(index, value) {
                $("#analog1_val_" + index).html(value);
            });
        });
}


function btn_analog3_vcp_get() {
    $.post("api/get_analog3_vcp", {
        },
        function(data, status) {
            console.log(data);
            d=data.split(',');
            $("#resistance").val(d[0]);
            $("#interval").val(d[1]);
            $("#delta").val(d[2]);
            $("#v_delta").html(d[3]);
        });
}

function btn_analog3_vcp_set(item) {
    pin_id = $("#pin_id").val();
    resistance = $("#resistance").val();
    interval = $("#interval").val();
    delta = $("#delta").val();

    $.post("api/set_analog3_vcp", {
            pin_id: pin_id,
            resistance: resistance,
            interval: interval,
            delta: delta,
        },
        function(data, status) {
            toastr["success"]("Command successfully issued.");
            console.log("data: " + data);
        });
}


$(document).ready(function() {
    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center"
    }
    //var tr_num = $('#t_analog tr').size();
    // $('#btn_get_all').click(function(){
    // 	var item = ''
    // 	$('#t_analog tr').each(function(i, val){
    // 		$(this).children('td').each(function(j){ 
    // 			//alert("第"+(i)+"行，第"+(j)+"个td的值："+$(this).text());
    // 			if(j == 0){
    // 				item = $.trim($(this).text());
    // 				//alert(i + ": " + item)
    // 				// alert(item);
    // 				btn_analog1_evt(item);
    // 				return false;
    // 			}
    // 		});
    // 	});
    // });

    // get all --new method
    $('#btn_get_all').click(function() {
        btn_analog1_evt_all();
    });


});
</script>
{% endblock %}